<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="/favicon.ico">
    <title>luckysheet-vue</title>

    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/css/pluginsCss.css' />
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/plugins.css' />
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/css/luckysheet.css' />
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/assets/iconfont/iconfont.css' />
    <style scoped>
        .luckysheet-share-logo {
            background-image: none;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/js/plugin.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/luckysheet.umd.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/luckyexcel/dist/luckyexcel.umd.js"></script>
    <script>
        var clickNums = 0;
        var samePos = null;
        function uploadExcel(obj) {
            const files = obj.files;
            if (files == null || files.length == 0) {
                alert("No files wait for import");
                return;
            }

            let name = files[0].name;
            let suffixArr = name.split("."), suffix = suffixArr[suffixArr.length - 1];
            if (suffix != "xlsx") {
                alert("Currently only supports the import of xlsx files");
                return;
            }
            LuckyExcel.transformExcelToLucky(files[0], function (exportJson, luckysheetfile) {

                if (exportJson.sheets == null || exportJson.sheets.length == 0) {
                    alert("Failed to read the content of the excel file, currently does not support xls files!");
                    return;
                }
                window.luckysheet.destroy();

                window.luckysheet.create({
                    container: 'luckysheet', //luckysheet is the container id
                    showinfobar: false,
                    lang: 'zh', // 设定表格语言
                    data: exportJson.sheets,
                    title: exportJson.info.name,
                    userInfo: exportJson.info.name.creator,
                    hook: {
                        cellMousedown: function (cell, position) {
                            clickNums++
                            if (samePos == null) {
                                samePos = JSON.stringify({ r: position.r, c: position.c })
                            }
                            if (clickNums < 2) {
                                return
                            }
                            if (samePos != JSON.stringify({ r: position.r, c: position.c })) {
                                samePos = JSON.stringify({ r: position.r, c: position.c })
                                return
                            }
                            clickNums = 0;
                            samePos = null;
                            const triggerEvent = new CustomEvent('reportedit',
                                {
                                    detail: {
                                        pos: position,
                                    }
                                })
                            window.parent.dispatchEvent(triggerEvent)
                            return false
                        },
                        cellUpdated() {
                            clickNums = 0;
                            samePos = null;
                        }
                    },
                });
            });
        }
    </script>

<body>
    <div style="position: absolute;top:0;">
        <input style="font-size:16px;" type="file" onChange="uploadExcel(this)" />
    </div>
    <div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;left: 0px;top: 30px;bottom:0px;">
    </div>
</body>
<script>

    (function () {
        //配置项
        var options = {
            container: 'luckysheet', // 设定DOM容器的id
            title: 'Luckysheet Demo', // 设定表格名称
            lang: 'zh', // 设定表格语言
            showtoolbar: true,
            plugins: [],
            hook: {
                cellMousedown: function (cell, position) {
                    clickNums++
                    if (samePos == null) {
                        samePos = JSON.stringify({ r: position.r, c: position.c })
                    }
                    if (clickNums < 2) {
                        return
                    }
                    if (samePos != JSON.stringify({ r: position.r, c: position.c })) {
                        samePos = JSON.stringify({ r: position.r, c: position.c })
                        return
                    }
                    clickNums = 0;
                    samePos = null;
                    const triggerEvent = new CustomEvent('reportedit',
                        {
                            detail: {
                                pos: position,
                            }
                        })
                    window.parent.dispatchEvent(triggerEvent)
                    return false
                },
                cellUpdated() {
                    clickNums = 0;
                    samePos = null;
                }
            },
            data: [
                {
                    "borderInfo": {},
                    "name": "Cell", //工作表名称
                    "color": "", //工作表颜色
                    "index": 0, //工作表索引
                    "status": 1, //激活状态
                    "order": 0, //工作表的下标
                    "hide": 0,//是否隐藏
                    "row": 36, //行数
                    "column": 18, //列数
                    "defaultRowHeight": 19, //自定义行高
                    "defaultColWidth": 73, //自定义列宽
                    "celldata": [{ "r": 0, "c": 0, "v": 1 }, { "r": 0, "c": 1, "v": 2 }], //初始化使用的单元格数据
                    "config": {
                        "merge": {}, //合并单元格
                        "rowlen": {}, //表格行高
                        "columnlen": {}, //表格列宽
                        "rowhidden": {}, //隐藏行
                        "colhidden": {}, //隐藏列
                        "borderInfo": {}, //边框
                        "authority": {}, //工作表保护

                    },
                    "scrollLeft": 0, //左右滚动条位置
                    "scrollTop": 315, //上下滚动条位置
                    "luckysheet_select_save": [], //选中的区域
                    "calcChain": [],//公式链
                    "isPivotTable": false,//是否数据透视表
                    "pivotTable": {},//数据透视表设置
                    "filter_select": {},//筛选范围
                    "filter": null,//筛选配置
                    "luckysheet_alternateformat_save": [], //交替颜色
                    "luckysheet_alternateformat_save_modelCustom": [], //自定义交替颜色	
                    "luckysheet_conditionformat_save": {},//条件格式
                    "frozen": {}, //冻结行列配置
                    "chart": [], //图表配置
                    "zoomRatio": 1, // 缩放比例
                    "image": [], //图片
                    "showGridLines": 1, //是否显示网格线
                    "dataVerification": {} //数据验证配置
                },
                {
                    "name": "Sheet2",
                    "color": "",
                    "index": 1,
                    "status": 0,
                    "order": 1,
                    "celldata": [],
                    "config": {}
                },
                {
                    "name": "Sheet3",
                    "color": "",
                    "index": 2,
                    "status": 0,
                    "order": 2,
                    "celldata": [],
                    "config": {},
                }
            ]
        }
        luckysheet.create(options)
    })()

    function elemAttrChangeCallBack(data) {
        luckysheet.exitEditMode()
        luckysheet.setCellValue(data.pos.r, data.pos.c, {
            m: data.data.domainLable,
            v: `${data.data.tableValue}:${data.data.equipmentLable}:${data.data.domainID}`
        })
    }
    window.svgEditor = { elemAttrChangeCallBack: elemAttrChangeCallBack }

</script>

</html>